<template>
	<view class="u-wrap">
		<view class="scroll_header"></view>
		<view class="mt-5" v-if="u_loadmore">
			<u-loadmore status="loading" icon-type="circle" />
		</view>
		<view v-else>
			<view class="bg-white pt-2 rounded-15 m-2 rounded-15">
				<!-- 搜索 -->
				<view class="bg-white pb-2 px-2 seach">
					<view class="d-flex py-1 rounded-50 span-20 pl-3 pr-2 bg-light-secondary j-sb">
						<input class="ml-2 flex-1" @confirm="seach_confirm" v-model="seach_keywords" type="text"
							placeholder="搜索商品品牌名称关键字查找" @input="seach_input" />
						<u-icon @click="delete_confirm" name="close" color="#999999" size="28"></u-icon>
					</view>
				</view>

				<view class="" v-if="seach_show">
					<u-index-list :scrollTop="scrollTop" :index-list="brand_list.brandIndex">
						<view class="brand" v-for="(item,index) in brand_list.brandIndex" :key="index">
							<u-index-anchor :use-slot="true" :index="item">
								<text class="anchor-text">{{item}}</text>
							</u-index-anchor>
							<view class="px-2 border-box brand-bottom"
								v-for="(items,indexs) in brand_list.brandList[item]" :key="indexs"
								:class="brand_id==items.brand_id?'brand_action':''" @click="brand_tab(items)">
								<view class="border-bottom  py-2">
									{{items.brand_name}}
								</view>
							</view>
						</view>
					</u-index-list>
				</view>
				<view class="brand" v-else>
					<scroll-view scroll-y="true" :style="{height: scrollHeight}">
						<view class="px-2 border-box brand-bottom" v-for="(item,index) in seach_list" :key="index"
							:class="brand_id==item.brand_id?'brand_action':''" @click="brand_tab(item)">
							<view class="border-bottom py-2">
								{{item.brand_name}}
							</view>
						</view>
					</scroll-view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import Pinyin from "../../common/pinyin.js"
	let pinyin = new Pinyin();

	export default {
		data() {
			return {
				list: "",
				goods_id: '', // 公共ID
				brand_list: "", // 品牌列表
				scrollTop: 0, // 
				brand_id: "", // 索引
				seach_show: true,
				seach_keywords: "", // 关键字
				seach_list: "", // 搜索列表
				scrollHeight: 0, // 屏幕高度
				u_loadmore: true, // 加载中
			}
		},
		onReady() {
			let _this = this
			uni.getSystemInfo({
				success(resu) {
					const query = uni.createSelectorQuery()
					query.select('.scroll_header').boundingClientRect()
					query.exec(function(res) {
						_this.scrollHeight = resu.windowHeight - res[0].bottom + 'px';
					})
				}
			})
		},
		methods: {
			// 品牌
			brand_tab(item) {
				this.brand_id = item.brand_id
				this.$H.post("admin/merchant/goods/goodsbrand/update", {
					goods_id: this.goods_id,
					brand_id: item.brand_id
				}).then(res => {
					var globalData = getApp().globalData.brand_item;
					getApp().globalData.brand_item = item;
					uni.navigateBack({
						delta: 1
					})
				})
			},
			seach_input(e) {
				this.seach_keywords = e.detail.value
			},
			// 搜索品牌
			seach_confirm() {
				let keywords = this.seach_keywords
				if (keywords) {
					this.seach_list = this.list.filter(v => {
						if (v.brand_name.indexOf(keywords) != -1) {
							return v
						}
					})
				}
				this.seach_show = false
			},
			// x
			delete_confirm() {
				this.seach_keywords = ""
				this.seach_show = true
			}
		},
		onLoad(e) {
			this.goods_id = e.goods_id
			this.$H.post("admin/merchant/goods/detail", {
				goods_id: this.goods_id
			}).then(res => {
				this.brand_id = res.data.brand_id
			})
			// 数据格式化得方法
			// list:[{},{}]
			const brandData = list => {
				const brandList = {}
				// cons brandIndex=[]
				// 1 遍历 list 数组
				list.forEach(item => {
					// 2 获取每一个城市的首字母
					const first = pinyin.getCamelChars(item.brand_name.substr(0, 1).toUpperCase())
					// 3 判断 brandList 中是否有该分类
					if (brandList[first]) {
						// 4 如果有 直接往该分类中 push 数据
						// brandList[first].push(item)
						brandList[first].push(item)
					} else {
						// 5 如果没有 就先创建一个数组 然后  把当前城市信息添加到数组中
						brandList[first] = [item]
					}
				})
				// 获取索引数据
				const brandIndex = Object.keys(brandList).sort()
				return {
					brandList,
					brandIndex
				}
			}
			uni.request({
				url: "https://aaa.slwjpfw.com/sites/storeapi/admin/merchant/goods/brand",
				method: "POST",
				header: {
					'Content-Type': 'application/json;charset=UTF-8',
					'api-version': '2.28',
					'token': uni.getStorageSync("token")
				},
				data: {
					pagination: {
						count: 200,
						page: 1
					},
					'token': uni.getStorageSync("token")
				},
				success: (res) => {
					if (res.data) {
						let brand_res = res.data.data.filter(v => {
							if (v.is_show) {
								return v
							}
						})
						this.u_loadmore = false
						this.list = res.data.data
						this.brand_list = brandData(brand_res)
					} else {
						this.u_loadmore = false
						return
					}
				}
			})
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		}
	}
</script>

<style lang="scss">
	.brand_action {
		border-left: 2px solid #FF0000;
	}

	.anchor-text {
		color: red;
	}

	.brand-bottom:last-child ::after {
		border: none;
		content: "";
	}
</style>